<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title>使用scale缩放</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html {
				height: 100%;
				overflow: hidden;
				opacity: 0;
			}
			body {
				height: 100%;
			}
			.tip {
				position: fixed;
				top: 10px;
				left: 10px;
				color: red;
			}

			.big-screen {
				position: relative;
				width: 100vw;
				height: 100vh;
				overflow: hidden;
			}

			.big-content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform-origin: 0 0;
				transform: scale(1) translate(-50%,-50%);
				width: 1920px;
				height: 1080px;
				display: grid;
				grid-template-areas: 
					'header'
					'content';
				grid-template-rows: 80px auto;
				grid-gap: 15px;
			}
			.big-content .header {
				grid-area: header;
				background: rgba(0, 255, 0, 0.1);
			}
			.big-content .content {
				grid-area: content;
				display: grid;
				grid-template-areas:
					'left1 center1 center1 right1'
					'left2 center1 center1 right2'
					'left3 center2 center3 right3';
				grid-template-rows: auto;
				grid-template-columns: auto;
				grid-gap: 15px;
				padding: 0 15px;
			}

			.big-content .content > div {
				background: rgba(0, 255, 0, 0.1);
			}

			.big-content .content .left1 {
				grid-area: left1;
			}
			.big-content .content .left2 {
				grid-area: left2;
			}
			.big-content .content .left3 {
				grid-area: left3;
			}
			.big-content .content .center1 {
				grid-area: center1;
			}
			.big-content .content .center2 {
				grid-area: center2;
			}
			.big-content .content .center3 {
				grid-area: center3;
			}
			.big-content .content .right1 {
				grid-area: right1;
			}
			.big-content .content .right2 {
				grid-area: right2;
			}
			.big-content .content .right3 {
				grid-area: right3;
			}

		</style>
	</head>
	<body>

		<div class="tip">注：可能会模糊，高德地图会应为缩放有问题，按钮点击区域因为缩放会有问题。</div>

		<div class="big-screen">
			<div class="big-content">
				<div class="header"></div>
				<div class="content">
					<div class="left1"></div>
					<div class="left2"></div>
					<div class="left3"></div>
					<div class="center1"></div>
					<div class="center2"></div>
					<div class="center3"></div>
					<div class="right1"></div>
					<div class="right2"></div>
					<div class="right3"></div>
				</div>
			</div>
		</div>

		<script>
			
			const DW = 1920, DH = 1080;

			window.onload = function () {
				setScale();
				document.documentElement.style.opacity = '1';

				const resize = debounce(setScale, 100);
				window.addEventListener('resize', resize);
			}

			// 防抖
			function debounce(fn, t) {
				const delay = t || 500;
				let timer;
				return function () {
					const args = arguments;
					if(timer) {
						clearTimeout(timer);
					}
					const context = this;
					timer = setTimeout(() => {
						timer = null;
						fn.apply(context, args);
					}, delay);
				}
			}

			// 设置缩放比
			function setScale() {
				const w = window.innerWidth / DW;
				const h = window.innerHeight / DH;
				const scale = w < h ? w : h;
				document.querySelector('.big-content').style.transform = `scale(${scale}) translate(-50%,-50%)`;
			}


		</script>
	</body>
</html>